<template>
  <div class="managepage">
    <div class="managepage_main">
      <div class="card_top">
        <el-card
          :body-style="{ padding: '10' }"
          style="text-align: left;"
          shadow="never"
        >
          <div class="taber">
            <el-input
              style="width:250px;"
              placeholder="请输入手机号"
              suffix-icon="el-icon-search"
              v-model="searchipt"
              @change="searchphone"
            >
            </el-input>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="已审核" name="1"> </el-tab-pane>
              <el-tab-pane label="未审核" name="2"> </el-tab-pane>
            </el-tabs>
            <div>
              <el-table
                v-loading="loading"
                :data="tableData"
                style="width: 100%"
                :cell-style="rowClass"
                :header-cell-style="headClass"
                ref="singleTable"
                @current-change="handleCurrentChange"
                highlight-current-row
              >
                <!-- fixed -->
                <el-table-column prop="date" label="用户ID">
                  <template slot-scope="scope">
                    <div>{{ scope.row.id }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="date" label="昵称">
                  <template slot-scope="scope">
                    <div>{{ scope.row.nickname }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="date" label="手机号">
                  <template slot-scope="scope">
                    <div>{{ scope.row.phone }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="title" label="邮箱">
                  <template slot-scope="scope">
                    <div style="text-align:center">
                      {{ scope.row.email }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="active" label="操作">
                  <template slot-scope="scope">
                    <div>
                      <el-popconfirm
                        title="确定禁用吗？"
                        @onConfirm="cancel(scope.row)"
                      >
                        <el-button slot="reference" type="text" size="small"
                          >禁用上单
                        </el-button>
                      </el-popconfirm>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div style="width:100%;text-align:right">
                <!-- 分页器 -->
                <!-- @size-change="handleSizeChange" -->
                <!-- background -->
                <el-pagination
                  @current-change="handleCurrentChange2"
                  :current-page="currentPage"
                  :page-size="pagesize"
                  :pager-count="11"
                  layout="total, prev, pager, next, jumper"
                  :total="count"
                >
                  <!-- :page-sizes="[100, 200, 300, 400]" -->
                </el-pagination>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getOrderSheetUser,
  batchExamine,
  cancelLogin
} from "@/api/upgoods/upgoods";
export default {
  name: "teamset",
  data() {
    return {
      pagesize: 30,
      currentPage: 1,
      count: 0,
      type: "1",
      searchipt: "",
      loading: false,
      activeName: "1",
      tableData: [],
      choosearr: []
    };
  },

  computed: {},
  created() {
    this.getOrderSheetUser();
  },
  mounted() {},
  methods: {
    handleCurrentChange2(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getOrderSheetUser(this.currentPage, 15, this.searchipt, this.type);
    },
    handleSelectionChange(val) {
      console.log(val);
      this.choosearr = val;
    },
    cancelLogin(user_id) {
      cancelLogin({ user_id: user_id })
        .then(res => {
          console.log(res);
          this.$message.success("禁用成功!");
          this.getOrderSheetUser();
        })
        .catch(err => {
          console.log(err);
        });
    },
    batchExamine(user_id) {
      batchExamine({ user_id: user_id })
        .then(res => {
          console.log(res);
          this.$message.success("审核成功!");
          this.getOrderSheetUser();
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 审核
    pass(row) {
      console.log(row);
      if (this.choosearr.length == 0) {
        this.batchExamine(row.id);
      } else {
        console.log(this.choosearr);
        let idarr = [];
        this.choosearr.forEach(e => {
          idarr.push(e.id);
        });
        idarr = idarr.toString();
        console.log(idarr);
        this.batchExamine(idarr);
      }
    },
    // 禁用上单
    cancel(row) {
      console.log(row);
      this.cancelLogin(row.id);
    },
    searchphone() {
      this.getOrderSheetUser(1, 15, this.searchipt, this.type);
    },
    getOrderSheetUser(page, pagesize, phone, type) {
      this.loading = true;
      getOrderSheetUser({
        page: page,
        pagesize: pagesize,
        phone: phone,
        type: type // 1已审核 2未审核
      })
        .then(res => {
          this.loading = false;
          console.log("账号列表", res.data);
          this.count = res.data.count;
          this.tableData = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 表头背景色
    headClass() {
      return "text-align: center;background:#eef1f6;";
    },
    // 表格样式设置
    rowClass() {
      return "text-align: center;";
    },
    // 表格选中行高亮
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },

    // 导航栏切换
    handleClick(tab, event) {
      console.log(tab, event);
      this.type = parseInt(tab.index) + 1;
      this.getOrderSheetUser(1, 15, this.searchipt, this.type);
    }
  }
};
</script>

<style lang="less" scoped>
.managepage {
  // width: 970px;
  box-sizing: border-box;
  // .managepage_main::v-deep {
  //   width: 970px;
  // }
}
</style>
